<template>
  <div class="main-box">
    <TreeFilter
      label="data"
      id="attr"
      title="所在位置"
      :data="treeFilterData"
      :default-value="initParam.departmentId"
      @change="changeTreeFilter"
      @delete-node="handleRightClick"
    />

    <!-- @contextmenu.stop="onContextMenu($event)"-->
    <div class="classBox">
      <div class="editClass">
        <p>编辑</p>
        <el-form :label-position="labelPosition" label-width="auto" :model="formLabelAlign" style="max-width: 600px">
          <el-form-item label="分类名称">
            <el-input v-model="formLabelAlign.name" :disabled="formLabelAlign.name == '所在位置' ? true : false" />
          </el-form-item>
          <el-form-item label="分类编码">
            <el-input v-model="formLabelAlign.code" />
          </el-form-item>
          <el-form-item label="分类描述">
            <el-input v-model="formLabelAlign.desc" />
          </el-form-item>
          <el-form-item label="操作">
            <el-button type="primary" @click="saveEdit(initParam.departmentId)">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="editClass">
        <p>新增</p>
        <el-form :label-position="labelPosition" label-width="auto" style="max-width: 600px">
          <el-form-item label="分类名称">
            <el-input v-model="addRequestClassName" />
          </el-form-item>
          <el-form-item label="分类编码">
            <el-input v-model="addRequestClassCode" />
          </el-form-item>
          <el-form-item label="分类描述">
            <el-input v-model="addRequestClassDesc" />
          </el-form-item>
          <el-form-item label="操作">
            <el-button type="primary" @click="saveadd(initParam.departmentId)">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="location">
import { ref, reactive, onMounted } from "vue";
import { getLocationList, isExist, editClass, addClass, deleteClass } from "@/api/modules/dictionary";
import { FormProps, ElMessage } from "element-plus";
import ContextMenu from "@imengyu/vue3-context-menu";
import TreeFilter from "@/components/TreeFilter/treeFilter.vue";
onMounted(() => {
  getTreeFilter();
});
const labelPosition = ref<FormProps["labelPosition"]>("right");
const formLabelAlign = reactive({
  name: "",
  code: "",
  desc: ""
});
const addRequestClassName = ref("");
const addRequestClassCode = ref("");
const addRequestClassDesc = ref("");
// const router = useRouter();

const treeFilterData = ref<any>([]);
const initParam = reactive({ departmentId: "" });
const getTreeFilter = async () => {
  const data = await getLocationList();
  console.log(data);
  if (data) {
    treeFilterData.value = [];
    treeFilterData.value.push(data);
  }
};
const saveEdit = async e => {
  if (e == "") {
    ElMessage.warning("请先选择分类");
  } else {
    const isExistParams = {
      "eventCategoryDto.eventName": formLabelAlign.name,
      "eventCategoryDto.eavId": "",
      "eventCategoryDto.formId": "",
      "eventCategoryDto.categoryCodeRule": formLabelAlign.code,
      "eventCategoryDto.eventDescription": formLabelAlign.desc,
      "eventCategoryDto.eventId": e
    };
    const res = await editClass(isExistParams);
    if (res == null) {
      ElMessage.success("修改数据成功");
      formLabelAlign.name = "";
      formLabelAlign.code = "";
      formLabelAlign.desc = "";
      initParam.departmentId = "";
      getTreeFilter();
    } else {
      ElMessage.warning("请检查数据是否有误");
    }
  }
};
const saveadd = async e => {
  if (formLabelAlign.name == "") {
    ElMessage.warning("请先选择父节点");
  } else {
    const isExistParams = {
      "eventCategoryDto.eventName": addRequestClassName.value,
      "eventCategoryDto.eavId": "",
      "eventCategoryDto.formId": "",
      "eventCategoryDto.categoryCodeRule": addRequestClassCode.value,
      "eventCategoryDto.eventDescription": addRequestClassDesc.value,
      "eventCategoryDto.parentEventId": e
    };
    const addParams = {
      "eventCategoryDto.eventName": addRequestClassName.value,
      "eventCategoryDto.eavId": "",
      "eventCategoryDto.formId": "",
      "eventCategoryDto.categoryCodeRule": addRequestClassCode.value,
      "eventCategoryDto.eventDescription": addRequestClassDesc.value,
      "eventCategoryDto.parentEventId": e
    };
    const data = await isExist(isExistParams);
    if ((data as any) === "isExist") {
      ElMessage.warning("分类已存在");
      return;
    } else {
      const res = await addClass(addParams);
      if (res === null) {
        ElMessage.success("添加数据成功");
        formLabelAlign.name = "";
        formLabelAlign.code = "";
        formLabelAlign.desc = "";
        initParam.departmentId = "";
        addRequestClassName.value = "";
        addRequestClassCode.value = "";
        addRequestClassDesc.value = "";
        getTreeFilter();
      } else {
      }
    }
  }
};
// 树形筛选切换
const changeTreeFilter = (val: { id: { id: string } }) => {
  console.log(val);
  if (!val || val instanceof Array) {
    return;
  }
  initParam.departmentId = (val as any)?.id.id || "";
  formLabelAlign.name = (val as any)?.label || "";
};
//
const handleRightClick = (e: object, val: { id: { id: string } }) => {
  ContextMenu.showContextMenu({
    x: (e as any)?.clientX,
    y: (e as any)?.clientY,
    items: [
      {
        label: "删除",
        onClick: async () => {
          const id = {
            "eventCategoryDto.eventId": val.id.id || ""
          };
          const res = await deleteClass(id);
          console.log(res);
          if ((res as any).res === "0") {
            ElMessage.error("该数据存在相关联的数据，不能被删除！");
            return;
          } else {
            ElMessage.success("删除分类成功");
            getTreeFilter();
          }
        }
      }
    ]
  });
};
</script>
<style scoped lang="scss">
.classBox {
  display: flex;
  width: 100%;
  .editClass {
    width: 50%;
  }
}
</style>
